<template>
  <div class="myDiv">
    <Header title="经销商提现申请"></Header>
    <el-table
      :data="vesssel"
      v-loading="loading"
      border
      style="width: 100%;"
      size="mini"
      height="458"
      :stripe="true"
      @row-click="showdata"
      :cell-style="{padding:'9px 0'}"
    >
      <el-table-column
        fixed
        align="center"
        prop="amount"
        width="75"
        show-overflow-tooltip
        label="提现金额"
      >
        <template slot-scope="scope">{{scope.row.amount?scope.row.amount.toFixed(2):0}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip width="80" prop="state" align="center" label="提现状态">
        <template
          slot-scope="scope"
        >{{scope.row.state==1?'提现通过':scope.row.state==2?'提现驳回':scope.row.state==3?'系统驳回':'申请中'}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip width="75" prop="userName" align="center" label="申请人"></el-table-column>
      <el-table-column show-overflow-tooltip prop="date" align="center" label="申请时间"></el-table-column>
    </el-table>
    <Page ref="page" :total="total" @pagenum="pagenum"></Page>
    <!--弹出层  -->
    <van-popup v-model="show" round position="bottom" :style="{ height: '35%' , paddingTop:'10px'}">
      <van-field
        v-model.trim="form.username"
        :error="temp"
        placeholder="请输入审批人"
        required
        clearable
        type="text"
        label="审批人:"
      />
      <van-radio-group v-model="form.radio">
        <van-cell-group>
          <van-cell title="提现通过" clickable @click="form.radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="提现驳回" clickable @click="form.radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-button round type="info" style="margin-top:15px" @click="approval" block>确定</van-button>
    </van-popup>
  </div>
</template>

<script>
import Header from "@/components/header";
import Page from "@/components/pagination";

export default {
  components: { Header, Page },
  props: {},
  data() {
    return {
      show: false,
      page: 1,
      rows: 10,
      temp: false,
      loading: true,
      total: 0,
      tableData: [], //全部数据
      vesssel: [], //页面临时数据
      form: { username: "", radio: "1", data: {} }
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / 10)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = data[1];
    },
    // 审批
    approval() {
      if (this.form.username == "") {
        this.temp = !this.temp;
        return;
      }
      if (this.form.radio == "1") {
        this.$http(this.api.passWithdrawDeposits, {
          id: this.form.data.id,
          username:this.form.username
        }).then(res => {
          this.result(res);
        });
      } else {
        this.$http(this.api.rejectWithdrawDeposits, {
          id: this.form.data.id,
          username:this.form.username
        }).then(res => {
          this.result(res);
        });
      }
    },
    // 处理结果
    result(res) {
      if (res.data.result == "true") {
        this.show = !this.show;
      }
      this.Tips(
        res.data.message,
        res.data.result == "true" ? "success" : "warning"
      );
      this.init();
    },
    init() {
      this.$http(this.api.queryWithdrawDeposits).then(res => {
        if (res.data.result == "true") {
          this.$refs.page.changecurrent(1);
          this.total = res.data.pageData.total;
          this.tableData = res.data.pageData.data;
          this.vesssel = this.tableData.slice(0, this.rows);
          this.loading = false;
        }
      });
    },
    // 弹出层
    showdata(row) {
      let id = this.$store.state.userinfo.userkind;
      if (id == 1 || id == 34 ) {
        if (row.state == 0) {
          this.form.data = row;
          this.show = !this.show;
        }
      }
    }
  },
  created() {
    this.init();
  },
  mounted() {}
};
</script>
<style scoped>
</style>